<template>
  <div id="home">
    <!--头部-->
    <home-header></home-header>
    <!--轮播图-->
    <slider :sliderData="sliderData"></slider>
    <!--导航-->
    <home-nav :navP1="navP1" :navP2="navP2"></home-nav>
    <!--热销推荐-->
    <hot :hotList="hotList"></hot>
    <!--周末去哪儿-->
    <weekend :weekList="weekList"></weekend>
  </div>
</template>

<script>
import homeHeader from "./header.vue"
import slider from "./slider.vue"
import homeNav from "./nav.vue"
import hot from "./hot.vue"
import weekend from "./weekend.vue"
export default {
  components:{
    homeHeader,
    slider,
    homeNav,
    hot,
    weekend
  },
  data(){
    return{
      //轮播图数据
      sliderData:[],
      //导航两页的数据
      navP1:[],
      navP2:[],
      //热销推荐列表数据
      hotList:[],
      //周末去哪儿列表数据
      weekList:[]
    }
  },
  methods:{
    //获取轮播图数据
    getSliders(){
      this.$http.get("http://www.qunar/slider.com").then((res)=>{
        if(res.data.images.status ==200){
          this.sliderData = res.data.images.data
        }
      })
    },
    //获取导航部分的数据
    getNavData(){
      this.$http.get("http://www.qunar/nav.com").then((res)=>{
        if(res.data.status == 200){
          res.data.data.forEach(item=>{
            if(item.page == 1){
              this.navP1.push(item)
            }
            else if(item.page == 2){
              this.navP2.push(item)
            }
          })
        }
      })
    },
    //获取热销列表的数据
    getHotList(){
      this.$http.get("http://www.qunar/hot.com").then((res)=>{
        if(res.data.status == 200){
          this.hotList = res.data.data
        }
      })
      .catch((err)=>{
        console.log(err)
      })
    },
    //获取周末去哪儿列表数据
    getWeekData(){
      this.$http.get("http://www.qunar/weekend.com").then((res)=>{
        if(res.data.status == 200){
          this.weekList = res.data.data
        }
      })
      .catch((err)=>{
        console.log(err)
      })
    }
  },
  created(){
   this.getSliders()
   this.getNavData()
   this.getHotList()
   this.getWeekData()
  },
}
</script>

<style lang="less">
 body,p,h4{
   margin:0;
   padding: 0
 }
 h4{
   font-weight: normal
 }
 .clearfix::after{
   display: block;
   content: '';
   clear: both;
 }
 ul{
   margin: 0;
   padding: 0;
   list-style: none;
 }
  /*设置屏幕适配*/
  @media screen and(device-width: 320px){
     html{
       font-size: 16px
     }
  }
  @media screen and(device-width: 360px){
    html{
      font-size: 18px
    }
  }
  @media screen and(device-width: 375px){
    html{
      font-size: 18.75px
    }
  } 
  @media screen and(device-width: 411px){
    html{
      font-size: 20.55px
    }
  } 
  @media screen and(device-width: 768px){
    html{
      font-size: 38.4px
    }
  }
  @media screen and(device-width: 411){
    html{
      font-size: 51.2px
    }
  }   


</style>